<input type="checkbox" id="checkbox" />
<label for="checkbox" class="switch">
  Start
  <svg
    class="slider"
    viewBox="0 0 512 512"
    height="1em"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V256c0 17.7 14.3 32 32 32s32-14.3 32-32V32zM143.5 120.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6c-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4c0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z"
    ></path>
  </svg>
</label>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: active, switch, toggle, toggle switch */
#checkbox {
  display: none;
}

.switch {
  position: relative;
  width: fit-content;
  padding: 10px 20px;
  background-color: rgb(46, 46, 46);
  border-radius: 50px;
  z-index: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: white;
  font-size: 0.9em;
  font-weight: 600;
  transition: all 0.3s;
}
.switch svg path {
  fill: white;
}
#checkbox:checked + .switch {
  background-color: rgb(174, 0, 255);
  box-shadow: 0px 0px 40px rgba(174, 0, 255, 0.438);
}

</style>
    